<!doctype html>

<html>
  <head>
    <title>ReactList Examples</title>
    <style>
      body {
        margin: 0;
        font-family: 'Helvetica Neue', sans-serif;
      }

      a {
        color: #38afd4;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      .banner {
        border: 0;
        position: absolute;
        right: 0;
        top: 0;
      }

      .header {
        background: #fff;
        color: #ec7720;
        font-size: 50px;
        padding: 40px;
      }

      .example {
        padding: 25px;
      }

      .props {
        overflow: auto;
      }

      .component {
        border: 10px solid #38afd4;
        border-radius: 5px;
        height: 300px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
      }

      .item {
        background: linear-gradient(#fff, #eee);
        line-height: 30px;
        padding: 0 10px;
      }

      .axis-x .item {
        display: inline-block;
        line-height: 300px;
        padding: 0;
        text-align: center;
        width: 150px;
      }

      .axis-x .component {
        white-space: nowrap;
      }

      .square-item {
        background: linear-gradient(#fff, #eee);
        display: inline-block;
        line-height: 100px;
        text-align: center;
        width: 100px;
      }

      .even {
        background: linear-gradient(#ddd, #ccc);
      }
    </style>
  </head>

  <body>
    <div id='main'></div>
    <script src='index.js'></script>
  </body>
</html>
